<div *ngIf="unit">
  <div class="clr-row">
    <div class="clr-col-xs-12	clr-col-sm-6	clr-col-md-6	clr-col-lg-6	clr-col-xl-6">
      <h5>{{ unit.description }}</h5>

      <p
        *ngIf="
          ms.game.researches.team1.done &&
          unit.buyAction &&
          unit.bonus.gt(0) &&
          unit.produces.length > 0
        "
      >
        你购买了这个 {{ unit.buyAction.quantity | format }} 次; 奖励加成: +
        {{ unit.bonus.times(100) | format }}%
      </p>

      <p *ngIf="unit.c.abs().gt(0.01)">
        产量:
        <app-polynom [a]="unit.a" [b]="unit.b" [c]="unit.c"></app-polynom>
      </p>

      <clr-alert
        *ngIf="unit.isEnding"
        [clrAlertType]="
          malus
            ? 'alert-success'
            : ms.game.firstEndingUnit.endIn < 3600000
            ? 'alert-danger'
            : 'alert-warning'
        "
        [clrAlertClosable]="false"
        [clrAlertSizeSmall]="false"
      >
        <clr-alert-item>
          <span class="alert-text"> 耗尽 {{ unit.endIn | endIn }} </span>
        </clr-alert-item>
      </clr-alert>

      <clr-alert
        *ngIf="malus && malus.first && malus.isActive()"
        [clrAlertType]="'alert-danger'"
        [clrAlertSizeSmall]="false"
        [clrAlertClosable]="false"
      >
        <clr-alert-item>
          <span>
            {{ malus.name }} 正在导致
            <span class="monospace">
              {{ malus.priceMultiplier.minus(1).times(100) | format }} %
            </span>
            增长
            <a [routerLink]="'/nav/unit/' + malus.malusType.id">
              {{ malus.malusType.name }}
            </a>
            价格增长.
          </span>
        </clr-alert-item>
      </clr-alert>

      <div *ngIf="unit.produces.length > 0 && !malus">
        <span>单位操作性: {{ unit.efficiency | format }} %</span>

        <p-slider
          [min]="0"
          [max]="100"
          [step]="0.01"
          [(ngModel)]="unit.efficiency"
          animate="true"
        ></p-slider>
      </div>

      <app-action *ngIf="unit.buyAction" [action]="unit.buyAction"></app-action>
      <app-action
        *ngIf="unit.teamAction && ms.game.researches.team2.done"
        [action]="unit.teamAction"
      ></app-action>
      <app-action
        *ngIf="unit.twinAction && ms.game.researches.twin.done"
        [action]="unit.twinAction"
      ></app-action>

      <div *ngIf="madeChart" class="chartDiv">
        <app-made-by-chart [unit]="unit"></app-made-by-chart>
        <app-made-by-chart [unit]="unit" [consumers]="true"></app-made-by-chart>
      </div>
    </div>
    <div
      class="clr-col-xs-12	clr-col-sm-6 clr-col-md-6	clr-col-lg-6 clr-col-xl-6"
    >
      <div *ngIf="activeProduct?.length > 0">
        <h6>{{ unit.name }} 生产:</h6>
        <clr-datagrid class="datagrid-compact">
          <clr-dg-column [clrDgField]="'product.name'">名称</clr-dg-column>
          <clr-dg-column [clrDgSortBy]="prodSorter">比率</clr-dg-column>
          <clr-dg-column [clrDgSortBy]="totalProdSorter"
            >总产量</clr-dg-column
          >
          <clr-dg-row *clrDgItems="let product of activeProduct">
            <clr-dg-cell>
              <a [routerLink]="'/nav/unit/' + product.product.id">
                {{ product.product.name }}
              </a>
            </clr-dg-cell>
            <clr-dg-cell>
              <span [class.notEnough]="product.ratio.lt(0)" class="monospace">
                {{ product.prodPerSec | format }}</span
              >
            </clr-dg-cell>
            <clr-dg-cell>
              <span [class.notEnough]="product.ratio.lt(0)" class="monospace">
                {{ product.prodPerSec.times(unit.quantity) | format }}
              </span>
            </clr-dg-cell>
            <clr-dg-row-detail *clrIfExpanded>
              <app-production-signposts
                [production]="product"
              ></app-production-signposts>
            </clr-dg-row-detail>
          </clr-dg-row>

          <clr-dg-footer>
            <clr-dg-pagination #pagination [clrDgPageSize]="10">
              {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
              {{ pagination.totalItems }}
            </clr-dg-pagination>
          </clr-dg-footer>
        </clr-datagrid>
      </div>

      <div *ngIf="activeProducer?.length > 0">
        <h6>{{ unit.name }} 产量来自:</h6>
        <clr-datagrid class="datagrid-compact">
          <clr-dg-column [clrDgField]="'producer.name'">名字</clr-dg-column>
          <clr-dg-column [clrDgSortBy]="prodSorter">比率</clr-dg-column>
          <clr-dg-column [clrDgSortBy]="totalProdSorter"
            >总产量</clr-dg-column
          >

          <clr-dg-row *clrDgItems="let producer of activeProducer">
            <clr-dg-cell>
              <a [routerLink]="'/nav/unit/' + producer.producer.id">
                {{ producer.producer.name }}
              </a>
            </clr-dg-cell>
            <clr-dg-cell>
              <span [class.notEnough]="producer.ratio.lt(0)" class="monospace">
                {{ producer.prodPerSec | format }}
              </span>
            </clr-dg-cell>
            <clr-dg-cell>
              <span [class.notEnough]="producer.ratio.lt(0)" class="monospace">
                {{
                  producer.prodPerSec.times(producer.producer.quantity) | format
                }}</span
              >
            </clr-dg-cell>
          </clr-dg-row>

          <clr-dg-footer>
            <clr-dg-pagination #pagination [clrDgPageSize]="10">
              {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
              {{ pagination.totalItems }}
            </clr-dg-pagination>
          </clr-dg-footer>
        </clr-datagrid>
      </div>
    </div>
  </div>
</div>
